<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../vue.js"></script>
    <title>Document</title>
</head>

<body>
    <!-- 
        条件渲染 
            1. v-if
                写法:
                    (1).v-if="条件表达式"
                    (2).v-else-if="条件表达式"
                    (3).v-else=表达式""
                适用于:切换频率较低的场景
                特点:不展示的DoM元素直接被移除
                注意:v-if可以和v-else-if v-else 一起使用 ,但是要求结构不能被打断.
            2.v-show 
                写法:v-show="条件表达式"
                适用于:切换频率较高的场景
                特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉

            3.备注: 使用v-if的时候,元素可能无法获取到, 而使用v-show一定可以获取到
     -->
    <div class="root">
        <!-- 使用v-show进行条件渲染   元素还在只不过加上了display='none'--> 
        <h1 v-show="ok">欢迎来到我的{{world}}</h1>
        <h1 v-show="noOk">欢迎来到我的{{world}}</h1>
        <!-- 使用v-if进行条件渲染  元素彻底被删除-->
        <h1 v-if="ok">欢迎来到我的{{world}}</h1>
        <h1 v-show="noOk">欢迎来到我的{{world}}</h1>
        <hr>
        <h2>a:{{number.a}}</h2>
        <button @click="changeA">点击a+1</button>


        <!-- 频率高的用v-show   频率低的用v-if +v-else-if 效率高-->
        <div v-if="number.a === 1">Angular</div>  
        <div v-else-if="number.a === 2">react</div>
        <div v-else-if="number.a === 3">Vue</div>
        <div v-else>谁都没有</div>

        <hr>
        <div v-show="number.a === 1">Angular</div>
        <div v-show="number.a === 2">react</div>
        <div v-show="number.a === 3">Vue</div>
        <hr>

        <template>  <!-- 删除最外层模板-->
            <div v-if="number.a === 1">Angular</div>  
            <div v-if="number.a === 2">react</div>
            <div v-if="number.a === 3">Vue</div>
        </template>
    </div>
</body>
    <script>
        const vm = new Vue({
            data:{
                world:'世界',
                ok:false,
                noOk:true,
                number:{
                    a:0
                }
            },
            methods:{
                changeA(){
                    this.number.a++
                }
            }
        }).$mount('.root')
    </script>
</html>